<template>
    <div class="container">
        <div class="pool">接单池</div>
        <van-dropdown-menu swipe-threshold="4" class="dropdown">
            <van-dropdown-item v-model="value1" :options="option1" @change="orderinfo" />
            <van-dropdown-item v-model="value2" :options="option2" @change="orderinfo" />
            <van-dropdown-item v-model="value3" :options="option3" @change="orderinfo" />
        </van-dropdown-menu>

        <div class="item_info">
            <div class="order_detail" v-for=" (item, i) in orderData" :key="i">
                <img :src=item.data_upload class="img_detail">
                <button class="order_status">{{ item.status }}</button>
                <p class="order_item">{{ item.service_item }} </p>
                <p class="order_hospital">{{ item.hospital }} </p>
                <p class="order_escort">陪诊师：{{ item.escort }} </p>
                <p class="order_patient">患者：{{ item.patient }} </p>
                <p class="order_time">预约时间:{{ item.expect_time }} </p>
                <p class="order_price">订单价格：{{ item.price }}元 </p>
            </div>
        </div>
        <HomeView></HomeView>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import HomeView from './tabbar.vue';
import http from '@/http';

let orderData = ref([])
const value1 = ref(0);
const value2 = ref('');
const value3 = ref('');


const option1 = [
    { text: '最新发布', value: 0 },
    { text: '1日内', value: '1日内' },
    { text: '3日内', value: '3日内' },
    { text: '7日内', value: '7日内' }
];

const option2 = ref([{ text: '全部医院', value: '' }]);
const option3 = [{ text: '最新预约', value: '' }];

const queryAccepts = ({ order_time = null, order_hospital = null, order_pre = null } = {}) => {
    const params = {};
    if (order_time !== null) {
        params.order_time = order_time;
    }
    if (order_hospital !== null) {
        params.order_hospital = order_hospital;
    }
    if (order_pre !== null) {
        params.order_pre = order_pre;
    }
    return http.get('/escort/queryorders/', {
        params
    })
};

const orderinfo = () => {
    const order_time = value1.value === '' ? null : value1.value;
    const order_hospital = value2.value === '' ? null : value2.value;
    const order_pre = value3.value === '' ? null : value3.value;
    console.log(order_time, order_hospital, order_pre);
    queryAccepts({ order_time, order_hospital }).then(res => {
        console.log(res.data);
        orderData.value = res.data.order_info;
    }).catch(err => {
        console.log(err)
    })
}


onMounted(() => {
    http.get('/escort/acceptorder/').then((res) => {
        console.log("获取订单信息成功", res.data);
        orderData.value = res.data.order_info;
        res.data.hospital_names.forEach((item) => {
            option2.value.push({ text: item, value: item });
        });
    }).catch((err) => {
        console.log("获取订单信息失败", err);
    });
    queryAccepts();
});

</script>
<style scoped>
.container {
    width: 100%;
    height: 100%;
}

.pool {
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    font-weight: 700;
}

.item_info {
    padding-bottom: 100px;
    width: 100%;
    height: 100%;
}

.order_detail {
    position: relative;
    background-color: white;
    margin: 2% 5%;
    width: 90%;
    height: 200px;
    border-radius: 10px;
    border: 1px solid rgb(236, 233, 233);
    font-weight: 700;
    font-size: 14px;
    top: 2%;
}

.img_detail {
    position: absolute;
    width: 35%;
    height: 100px;
    left: 5%;
    margin-top: 5%;
    border-radius: 10px;
}


.order_status {
    position: absolute;
    top: 5%;
    right: 0;
    width: 60px;
    height: 20px;
    border-radius: 50px 0 0 50px;
    background-color: rgb(0, 149, 255);
    border: none;
    color: rgb(247, 241, 241);
    font-size: 12px;
}

.order_item {
    position: absolute;
    left: 45%;
    top: 0;
}

.order_hospital {
    position: absolute;
    left: 45%;
    top: 15%;
}

.order_escort {
    position: absolute;
    left: 45%;
    top: 30%;
}

.order_patient {
    position: absolute;
    left: 45%;
    top: 45%;
}

.order_time {
    position: absolute;
    left: 45%;
    top: 60%;
}

.order_price {
    position: absolute;
    left: 45%;
    top: 75%;
}
</style>